<template>
  <div class="PointsOrder">
    <div class="order_list">
      <ul>
        <li
          class="order_item"
          :class="{ bgColor: this.curIndex == 0 }"
          @click="btnTab(0)"
        >
          普通积分订单
        </li>
        <!-- <li
          class="order_item"
          :class="{ bgColor: this.curIndex == 1 }"
          @click="btnTab(1)"
        >
          精品积分订单
        </li> -->
        <li
          class="order_item"
          :class="{ bgColor: this.curIndex == 2 }"
          @click="btnTab(2)"
        >
          爆品金订单
        </li>
      </ul>
    </div>
    <div class="order_main">
      <div class="main" v-if="curIndex == 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多的订单了"
          @load="onLoad"
        >
          <div
            class="order_main"
            v-for="(v, i) in pointsOrder"
            :key="i"
            :title="i"
          >
            <span class="time">下单时间:{{ v.createTime }}</span>
            <div class="order-item">
              <div class="order_title">
                <span class="order_number">订单编号:{{ v.orderId }}</span>
                <p
                  :class="{
                    color666: v.status == 0,
                    color3d: v.status == 1,
                    colorf8: v.status == -1 || v.status == -2,
                  }"
                >
                  {{ v.statusMsg }}
                </p>
              </div>
              <div class="order_center">
                <div class="order_image">
                  <img
                    :src="item"
                    v-for="(item, indexImg) in v.goodsPictures"
                    :key="indexImg"
                  />
                </div>
                <!-- <span class="olyue">共{{v.goodsIds}}件</span> -->
              </div>
              <div class="footer_rig">
                <span>
                  积分消耗:
                  <i>{{ v.highQualityPoints }}</i>
                </span>
                <span class="details" @click="seeDetails(v)">查看详情</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="main" v-if="curIndex == 1">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多的订单了"
          @load="onLoad"
        >
          <div
            class="order_main"
            v-for="(v, i) in hightPointsOrder"
            :key="i"
            :title="i"
          >
            <span class="time">下单时间:{{ v.createTime }}</span>
            <div class="order-item">
              <div class="order_title">
                <span class="order_number">订单号:{{ v.orderId }}</span>
                <p
                  :class="{
                    color666: v.status == 0,
                    color3d: v.status == 1,
                    colorf8: v.status == -1 || v.status == -2,
                  }"
                >
                  {{ v.statusMsg }}
                </p>
              </div>
              <div class="order_center">
                <div class="order_image">
                  <img
                    :src="item"
                    v-for="(item, indexImg) in v.goodsPictures"
                    :key="indexImg"
                  />
                </div>
                <span class="olyue">{{ v.orderId }}</span>
              </div>
              <div class="footer_rig">
                <span>
                  积分消耗:
                  <i>{{ v.highQualityPoints }}</i>
                </span>
                <span class="details" @click="seeDetails(v)">查看详情</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="main" v-if="curIndex == 2">
        <van-list
          :immediate-check="false"
          v-model="loading"
          :offset="400"
          :finished="finished"
          finished-text="没有更多的订单了"
          @load="onLoad"
        >
          <div
            class="order_main"
            v-for="(v, i) in boomOrder"
            :key="i"
            :title="i"
          >
            <span class="time">下单时间:{{ v.createTime }}</span>
            <div class="order-item">
              <div class="order_title">
                <span class="order_number">订单号:{{ v.orderId }}</span>
                <p
                  :class="{
                    color666: v.status == 0,
                    color3d: v.status == 1,
                    colorf8: v.status == -1 || v.status == -2,
                  }"
                >
                  {{ v.statusMsg }}
                </p>
              </div>
              <div class="order_center">
                <div class="order_image">
                  <img
                    :src="item"
                    v-for="(item, indexImg) in v.goodsPictures"
                    :key="indexImg"
                  />
                </div>
                <span class="olyue">{{ v.orderId }}</span>
              </div>
              <div class="footer_rig">
                <span>
                  爆品金消耗:
                  <i>{{ v.highQualityPoints }}</i>
                </span>
                <span class="details" @click="seeDetails(v, 2)">查看详情</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
//引入保存所有接口的url文件
import url from "../../axios/apiUrl";
//引入api.js定义的方法index
import { postRequest } from "../../api/index";
import { getRequest } from "../../api/indexGet";
export default {
  data() {
    return {
      curIndex: 0,
      pointsOrder: [], //会员积分订单
      hightPointsOrder: [], //精品积分订单
      boomOrder: [], //爆品金订单
      currentPage1: 1, //当前页
      loading: false,
      finished: false,
      totalPage: "", //总页数
      pageNumber: 1,
    };
  },

  created() {
    if (this.$route.query.type == 2) {
      this.curIndex = 2;
    }
    // this.onLoad(1)
  },
  methods: {
    // 跳转详情
    seeDetails(v, i) {
      this.$router.push({
        path: "/excellentPoints",
        query: { id: v.orderId, type: i },
      });
    },
    // 下拉加载分页数据
    onLoad(page) {
      if (page) this.pageNumber = page;
      if (this.curIndex == 0) {
        getRequest(url.getPointsOrder + "/0/" + this.pageNumber).then((res) => {
          if (res.data.code == "000000") {
            if (this.pageNumber == 1) {
              this.pointsOrder = [];
            }
            this.totalPage = res.data.content.total;
            this.pointsOrder = this.pointsOrder.concat(res.data.content.result);
            this.pointsOrder.map((obj) => {
              if (obj.status == 0) {
                this.$set(obj, "statusMsg", "准备中");
              } else if (obj.status == 1) {
                this.$set(obj, "statusMsg", "已发货");
              } else if (obj.status == -1) {
                this.$set(obj, "statusMsg", "兑换失败");
              } else if (obj.status == -2) {
                this.$set(obj, "statusMsg", "已取消");
              }
            })
            if (this.pageNumber >= res.data.content.total) {
              this.finished = true;
            } else {
              this.finished = false;
            }
            this.pageNumber++;
            this.loading=false
          }
        });
      } else if (this.curIndex == 1) {
        getRequest(url.getPointsOrder + "/1/" + this.pageNumber).then((res) => {
          if (res.data.code == "000000") {
            this.hightPointsOrder = this.hightPointsOrder.concat(
              res.data.content.result
            );
            this.hightPointsOrder.map((obj) => {
              if (obj.status == 0) {
                this.$set(obj, "statusMsg", "准备中");
              } else if (obj.status == 1) {
                this.$set(obj, "statusMsg", "已发货");
              } else if (obj.status == -1) {
                this.$set(obj, "statusMsg", "兑换失败");
              } else if (obj.status == -2) {
                this.$set(obj, "statusMsg", "已取消");
              }
            })
            this.totalPage = res.data.content.total;
            if (this.pageNumber>= res.data.content.total) {
              this.finished = true;
            } else {
              this.finished = false;
            }
            this.pageNumber++;

          }
        });
      } else if (this.curIndex == 2) {
        getRequest(url.getPointsOrder + "/2/" + this.pageNumber).then((res) => {
          if (res.data.code == "000000") {
            if (this.pageNumber == 1) {
              this.boomOrder = [];
            }
            this.totalPage = res.data.content.total;
            this.boomOrder = this.boomOrder.concat(res.data.content.result);
            this.boomOrder.map((obj) => {
              if (obj.status == 0) {
                this.$set(obj, "statusMsg", "准备中");
              } else if (obj.status == 1) {
                this.$set(obj, "statusMsg", "已发货");
              } else if (obj.status == -1) {
                this.$set(obj, "statusMsg", "兑换失败");
              } else if (obj.status == -2) {
                this.$set(obj, "statusMsg", "已取消");
              }
            });
            this.loading = false;
            if (this.pageNumber>= res.data.content.total) {
              // 数据全部加载完成
              this.finished = true;
            } else {
              this.finished = false;
            }
            this.pageNumber++;
          }
        });
      }
      console.log(this.finished)
    },

    // 点击获取数据
    btnTab(i) {
      this.currentPage1 = 1;
      this.pageNumber = 1;
      this.curIndex = i;
      this.loading = true; //下拉加载中
      this.finished = false;
      this.pointsOrder = [];
      this.hightPointsOrder = [];
      this.boomOrder = [];
      this.onLoad(1);
    },
  },
};
</script>
<style lang="less" scoped>
.PointsOrder {
  top: 0;
  left: 0;
  width: 100%;
  background: #f1f2f6;
  .order_list {
    width: 100%;
    height: 80px;
    background: #ffffff;
    line-height: 80px;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        height: 60px;
        font-size: 26px;
        font-weight: 500;
        color: #333333;
      }
    }
    .bgColor {
      border-bottom: 3px solid #3dbb2b;
      color: #3dbb2b;
    }
  }
  .main {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    .order_main {
      // height: 384px;
      margin-top: 30px;
      padding: 12px;
      border-radius: 12px;
      .time {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #9a9a9a;
      }
      .order-item {
        width: 686px;
        height: 384px;
        background: #ffffff;
        border-right: 12px;
        margin-top: 20px;
        .order_title {
          display: flex;
          justify-content: space-between;
          padding-left: 16px;
          padding-right: 16px;
          height: 72px;
          line-height: 72px;
          border-bottom: 1px solid #f1f2f6;
          .order_number {
            font-size: 24px;
            font-weight: bold;
            color: #333333;
          }
          .huan {
            color: #3ebc2c;
            font-size: 24px;
            font-weight: bold;
          }
          .color3d {
            color: #3ebc2c;
            font-size: 24px;
            font-weight: bold;
          }
          .color666 {
            font-size: 24px;
            font-weight: bold;
            color: #666;
          }
          .colorf8 {
            font-size: 24px;
            font-weight: bold;
            color: #fe343c;
          }
        }
        .order_center {
          display: flex;
          justify-content: space-between;
          padding-left: 16px;
          padding-right: 16px;
          margin-bottom: 14px;
          height: 180px;
          align-items: center;
          img {
            width: 120px;
            height: 120px;
            box-sizing: border-box;
          }
          .name {
            font-size: 24px;
            font-weight: bold;
            color: #222222;
          }
          .olyue {
            color: #9a9a9a;
            font-size: 26px;
            font-weight: 500;
            color: #9a9a9a;
          }
        }
        .footer_rig {
          float: right;
          text-align: center;
          bottom: 0;
          padding-right: 16px;
          display: grid;

          span {
            color: #333333;
          }
          i {
            color: #1db807;
          }
          .details {
            width: 160px;
            height: 46px;
            border: 1px solid #d4d4d4;
            border-radius: 8px;
            text-align: center;
            line-height: 46px;
            color: #666666;
            margin-top: 12px;
            margin-left: 0.2rem;
          }
        }
      }
    }
  }
}
</style>